<template>
  <view class="container">
    <view class="mainBox">
      <view class="greetings">国源公司智慧园区</view>
      <uni-forms
        ref="form"
        editPsw
        class="formBox"
        :modelValue="formData"
        :rules="rules"
      >
        <uni-forms-item name="phonenumber">
          <view class="uni-form-item itemBox">
            <image class="img" src="/static/image/login_user.png" />
            <uni-easyinput
              type="text"
              v-model="formData.phonenumber"
              placeholder="请输入手机号"
              :inputBorder="false"
            />
          </view>
        </uni-forms-item>
        <uni-forms-item name="oldPassword">
          <view class="uni-form-item itemBox">
            <image class="img" src="/static/image/login_pwd.png" />
            <uni-easyinput
              type="password"
              v-model="formData.oldPassword"
              placeholder="请输入旧密码"
              :inputBorder="false"
            />
          </view>
        </uni-forms-item>
        <uni-forms-item name="newPassword">
          <view class="uni-form-item itemBox">
            <image class="img" src="/static/image/login_pwd.png" />
            <uni-easyinput
              type="password"
              v-model="formData.newPassword"
              placeholder="请输入新密码"
              :inputBorder="false"
            />
          </view>
        </uni-forms-item>
      </uni-forms>

      <view class="btnBox">
        <view class="tip" v-show="showTip">
          <uni-icons type="info-filled" color="#F44698" size="16"></uni-icons>
          <text>账号或密码输入错误</text>
        </view>
        <button class="submit" type="primary" @click="formSubmit">
          确定修改，去登录
        </button>
      </view>
    </view>
    <view class="footer"> </view>
  </view>
</template>

<script>
import { getCode, getRoleMenu, getSmsCode, editPsw } from '@/api/index';
export default {
  data() {
    return {
      uuid: '',
      codeImg: '',
      // 提交错误提示
      showTip: false,
      // 短信验证码
      timer: null,
      gettingSmsCode: false,
      smsSecond: 60,
      // 表单数据
      formData: {
        phonenumber: uni.getStorageSync('userInfo').phonenumber || '',
        // oldPassword: uni.getStorageSync('userInfo').password || '',
      },
      rules: {
        phonenumber: {
          rules: [
            {
              required: true,
              errorMessage: '请输入手机号',
            },
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              errorMessage: '请输入正确的手机号码',
            },
          ],
        },
        oldPassword: {
          rules: [
            {
              required: true,
              errorMessage: '请输入旧密码',
            },
          ],
        },
        newPassword: {
          rules: [
            {
              required: true,
              errorMessage: '请输入新密码',
            },
            {
              pattern:
                /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!@#$%^&*()_+\-={}\[\]|\\;:'",.<>/?~`])[A-Za-z\d!@#$%^&*()_+\-={}\[\]|\\;:'",.<>/?~`]{8,20}$/,
              errorMessage:
                '密码必须是8-20位，且必须包含大写字母、小写字母、数字和特殊符号',
            },
          ],
        },
      },
    };
  },
  onLoad(query) {
    // 关闭调试
    // wx.setEnableDebug({
    //   enableDebug: false,
    // });
  },
  onUnLoad() {
    this.timer && this.clearTimer();
  },
  onShow() {
    // this.getImgCode();
  },
  methods: {
    getImgCode() {
      getCode().then((res) => {
        this.uuid = res.data.uuid;
        this.codeImg = res.data.img;
      });
    },
    // 跳转页面
    onLocation(url) {
      uni.navigateTo({
        url,
      });
    },
    // 获取短信验证码
    getSmsCodeFn() {
      if (this.gettingSmsCode) return;

      this.gettingSmsCode = true;
      getSmsCode(this.formData.phonenumber)
        .then((res) => {
          this.timer = setInterval(() => {
            this.smsSecond--;
            if (this.smsSecond < 1) {
              this.gettingSmsCode = false;
              this.smsSecond = 60;
              this.clearTimer();
            }
          }, 1000);
        })
        .catch((err) => {
          this.gettingSmsCode = false;
          uni.showToast({
            icon: 'none',
            title: (err && err.msg) || '网络错误，请重试！',
          });
        });
    },
    // 提交
    formSubmit() {
      this.$refs['form']
        .validate()
        .then((res) => {
          uni.showLoading({
            title: '操作中',
          });
          editPsw(res)
            .then((res) => {
              uni.hideLoading();
              uni.navigateTo({
                url: '/pages/login/index',
              });
            })
            .catch((err) => {
              uni.hideLoading();
              console.log(err);
            });
        })
        .catch((err) => {
          console.log('err', err);
          // uni.showToast({
          //     icon: 'none',
          //     title: `密码或账号错误，请重新输入`,
          // })
        });
    },
    clearTimer() {
      clearInterval(this.timer);
      this.timer = null;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: calc(100vh - var(--window-top) - 128rpx);
  padding: 64rpx 36rpx;
  background-image: url('/static/image/login_bg.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: relative;
  .mainBox {
    margin: 280rpx 34rpx 0;
    background: #ffffff;
    border-radius: 18rpx;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    .blue-text {
      display: inline-block;
      min-width: 100rpx;
      color: #1777fb;
      &.active {
        color: #c1c1c1;
      }
    }
    .greetings {
      font-size: 35rpx;
      font-weight: 600;
      color: #1777fb;
      line-height: 47rpx;
      padding: 54rpx 0 40rpx;
    }
    :deep(.uni-forms) {
      padding: 0 40rpx;
    }
    .itemBox {
      width: calc(100% - 44rpx);
      padding: 15rpx 22rpx;
      border-radius: 4rpx;
      border: 2rpx solid #d9d9d9;
      background: #fff;
      display: flex;
      align-items: center;
      .img {
        width: 38rpx;
        height: 38rpx;
      }
      .code {
        width: 160rpx;
        height: 60rpx;
        border-radius: 5rpx;
        background: #e6e6e6;
      }
    }
    .btnBox {
      width: 80%;
      button {
        font-size: 36rpx;
        margin: 32rpx auto 54rpx;
        line-height: 90rpx;
        letter-spacing: 5rpx;
        box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.25);
        border-radius: 45rpx;
        &::after {
          border: none;
        }
      }
      .tip {
        height: 32rpx;
        color: #f2358e;
        font-size: 22rpx;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        text {
          padding-left: 20rpx;
        }
      }
      .submit {
        background: linear-gradient(83deg, #549df3 0%, #1876e9 88%);
      }
    }
    .toolBox {
      color: #888888;
      font-size: 24rpx;
      font-weight: bold;
      display: flex;
      align-items: center;
      view:first-child {
        color: #2d7ee0;
      }
      .line {
        height: 22rpx;
        border: 1rpx solid #c1c1c1;
        margin: 0 43rpx;
      }
    }
    ::v-deep .uni-forms-item__label {
      display: none;
    }
    ::v-deep .uni-forms-item__error {
      left: 55rpx;
    }
  }
  .formBox {
    width: 80%;
  }
}
.third {
  margin: 195rpx auto 84rpx;
  .box {
    margin-bottom: 64rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .line {
      width: 24%;
      border: 3rpx solid #cfcdcd;
    }
    .text {
      color: #c1c1c1;
      font-size: 24rpx;
      font-weight: bold;
      padding: 0 30rpx;
    }
  }
  .wcLogin {
    width: 83rpx;
    height: 83rpx;
    color: #fff;
    margin: auto;
    background: #50b674;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 165rpx;
  .agreement {
    color: #888888;
    font-size: 24rpx;
    font-weight: bold;
    text-align: center;
    text {
      color: #2d7ee0;
    }
  }
}
</style>
